<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div#outer{
    width : 400px;
    height : 400px;
    background-color : gray;
    
}
div#box {
    width: 200px;
    height: 800px;
    background-color: pink;
}
</style>
</head>
<body>
<div id="outer">
    <div id="box"></div>
</div>
<script>
box.onmouseover = function (){
    console.log("box... over");
    box.style.backgroundColor = "red";
}
box.onmouseout = function (){
    console.log("box... out");
    box.style.backgroundColor = "";
}

outer.onmouseover = function (){
    console.log("outer... over 事件");
}
outer.onmouseout = function (){
    console.log("outer... out 事件");
}
</script>
</body>
</html>